<template>
  <div class="supContain">
    <div class="accTitle" @click="toggleList">
      <span>{{ title.area }}</span>
      <img
        src="../../images/arrow-right.png"
        alt="chevron"
        :class="[
          'accChevron',
          { open_menu: isDisplay, close_menu: !isDisplay },
        ]"
      />
    </div>
    <waterfall
      :class="['tempaccList', { maxHeight: isDisplay ,  }]"
      :col="2"
      :data="list"
    >
      <template>
        <div class="cell-item" v-for="(item, index) in list" :key="index" v-bind:class="{noBottomMargin:index==list.length-1}">
            <div class="pluginItemContainer" v-bind:class="{noleftMargin:index%2!=0}" @click="callPlugin(item,index)">
                  <div class="pluginItemName">
                      <p class="pluginItemNameP">{{item.name}}</p>
                      <!-- <p class="pluginState"></p> -->
                  </div>
                  <p class="pluginItemMethod">{{item.method}}</p>
                </div>
            </div>
      </template>
    </waterfall>

   
  </div>
</template>


<script>
export default {
  data() {
    return {
      isDisplay: false,
    };
  },
  props: {
    title: {
      type: Object,
      default() {
        return {};
      },
    },
    list: {
      type: Array,
      required: true,
    },
    sectionIndex:{
      require: true
    }
  },
  methods: {
    toggleList() {
      this.isDisplay = !this.isDisplay;
    },
    callPlugin:function (item ,index) {
      console.log('item:'+ JSON.stringify(item)+ 'index'+ index + 'sectionIndex'+ this.sectionIndex);
      this.handleCommonPluginMethod(item);
    },

    // 通用接口
    handleCommonPluginMethod(item){
      var fun = this.$store.state.pluginMethod[item.method];
      console.log('handleCommonPluginMethod'+ item.method + 'state' + JSON.stringify(this.$store.state)+ typeof(fun));
      if (typeof(fun) == 'function') {
        console.log(fun);
        fun();
      }else{
        console.log('找不到插件调用实现'+ item.method);
        alert('找不到插件实现' + item.method)
      }
    },

  },
};
</script>

<style lang="less" scoped>

.cell-item {
  width: 50vw;
  margin-bottom: 10px;
  overflow: hidden;
}

.tempaccList {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  overflow: scroll;
  max-height: 0;
  transition: max-height 0.25s ease-out;
  width: 100vw;
  position: relative;
  left: 0;
  top: 0;
}

.tempaccList.maxHeight {
  max-height: 5000px;
  transition: max-height 0.25s ease-in;
}

.accTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  text-indent: 1em;
  cursor: pointer;
  border-bottom: 1px rgba(225, 225, 225, 0.5) solid;
}
.accChevron {
  width: 20px;
  margin-right: 15px;
}
/* chevron animation  */
@keyframes open-menu {
  to {
    transform: rotate(90deg);
  }
}
@keyframes close-menu {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.open_menu {
  animation: open-menu 0.25s ease-out forwards;
}
.close_menu {
  animation: close-menu 0.25s ease-out forwards;
}


.pluginItemContainer {
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: pink;
  margin-left: 5px;
  margin-right: 5px;
}

.noleftMargin{
  margin-left: 0px;
}

.noBottomMargin{
  margin-bottom: 0;
}


.pluginItemName {
  font-size: 14px;
  color: rgba(153, 153, 153, 0.8);
  line-height: 30px;
  display: flex;
  overflow: visible;
  align-self: center;
  text-align: center;
  font-weight: 800;
}

.pluginItemMethod {
  font-size: 14px;
  overflow: visible;
  line-height: 20px;
  color: black;
  font-weight: 800;
}

.pluginState {
  position: relative;
  background-color: salmon;
  width: 6px;
  height: 6px;
  right: -10px;
  border-radius: 3px;
  top: 2px;

}

.pluginItemNameP {
  display: flex;
  margin-top: 6px;
}


</style>